<template>
  <div>
    
      <el-form :inline="true" :model="query" label-width="100px" size="small">
        <!-- 关键词检索 -->
        <el-form-item>
          <span> 申请类型：</span>
          <el-form-item class="query-form-item">
             <el-select v-model="query.applicationtype" placeholder="请选择收支类型"  
                clearable
                @change="onSubmit">
                
                <el-option
                label="转账付款"
                value='1'
                > 
                </el-option>
                <el-option
                label="现金付款"
                value='2'
                > 
                </el-option>
                <el-option
                label="结款"
                value='3'
                > 
                </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <span> 申请状态：</span>
          <el-form-item class="query-form-item">
             <el-select v-model="query.auditstatus" placeholder="请选择明细类型"  
                clearable
                @change="onSubmit">
                <el-option
                label="待审核"
                value='0'
                >
                </el-option>
                <el-option
                label="已完成"
                value='1'
                >
                </el-option>
                <el-option
                label="驳回"
                value='2'
                >
                </el-option>
                <el-option
                label="处理中"
                value='3'
                >
                </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        
      </el-form>
      <!-- table表单 -->
      <el-table
        ref="singleTable"
        :data="tableData"
        v-loading="loading"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" align="center" width="50" fixed></el-table-column>
        <el-table-column prop="id" align="center" label="申请ID" />
        <el-table-column prop="auditstatus" align="center" label="申请状态" >
          <template slot-scope="scope">
            <span v-if="scope.row.auditstatus ==0">待审核</span>
            <span v-if="scope.row.auditstatus ==1">已完成</span>
            <span v-if="scope.row.auditstatus ==2">驳回</span>
            <span v-if="scope.row.auditstatus ==3">处理中</span>
          </template>
        </el-table-column>
        <el-table-column prop="applicationtype" align="center" label="申请类型" >
          <template slot-scope="scope">
            <span v-if="scope.row.applicationtype ==null"> 无</span>
            <span v-if="scope.row.applicationtype ==1">转账付款</span>
            <span v-if="scope.row.applicationtype ==2">现金付款</span>
            <span v-if="scope.row.applicationtype ==3">结款</span>
        </template>
        </el-table-column>
        <el-table-column prop="enterpriseName" align="center" label="申请商城名称" width="230" />
        <el-table-column prop="usermobile" align="center" label="联系电话" width="120"/>
        <el-table-column prop="payer" align="center" label="付款方" width="120"></el-table-column>
        <el-table-column prop="bankNumber" align="center" label="付款账户"> </el-table-column>
        <el-table-column prop="corporateaccount" align="center" label="收款账户" width="120"/>
        <el-table-column prop="fundvoucher" align="center" label="资金凭证" width="120"/>
        <el-table-column prop="transactionquota" align="center" label="申请金额" width="120"/>
        <el-table-column prop="payTime" align="center" label="付款时间" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"  v-if="scope.row.payTime !=null" style="margin-right:5px"></i> 
            <span v-if="scope.row.payTime !=null"> {{scope.row.payTime | formatDateStr("yyyy-MM-dd hh:mm:ss")}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column prop="applicationtime" align="center" label="申请生成时间" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"  v-if="scope.row.applicationtime !=null" style="margin-right:5px"></i> 
            <span v-if="scope.row.applicationtime !=null"> {{scope.row.applicationtime | formatDateStr("yyyy-MM-dd hh:mm:ss")}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>

        <el-table-column prop="completetime" align="center" label="申请结束时间" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"  v-if="scope.row.completetime !=null" style="margin-right:5px"></i> 
            <span v-if="scope.row.completetime !=null"> {{scope.row.completetime | formatDateStr("yyyy-MM-dd hh:mm:ss")}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" align="center" label="备注"></el-table-column>
        <el-table-column prop="rejectiontext" align="center" label="驳回原因" fixed="right" />
      </el-table>

      <el-pagination
        class="pagination-container"
        background
        :page-size="query.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :current-page="query.currentPage"
        :page-sizes="[5, 10, 20, 30, 50]"
        :total="totalNumber"
      ></el-pagination>
    
  </div>
</template>
<script>
import {getFunds} from  "../../api/fundsManagement/index"
export default {
  data() {
    return {
      tableData: [],
      query: {
        currentPage: 1,
        pageSize: 5,
        applicationtype: '',
        auditstatus:"",
      },
      totalNumber: 0,
      loading: false,
       
    }
  },

  methods: {
    //搜索
    onSubmit() {
      this.query.currentPage = 1
      this.getList()
    },
   
    handleSizeChange(val) {
      this.query.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.query.currentPage = val
      this.getList()
    },
    //获取列表
    getList(){
      this.loading =true
      getFunds(this.query)
      .then(res=>{
          if(res.code !=0){
              this.$message.warning(res.message)
              this.loading=false
              return false
          }
          this.tableData =res.data.list
          this.totalNumber =res.data.totalNumber
          this.loading =false
      })
      .catch(err=>{
          
          this.tableDate=[]
          this.loading=false
      })
  }
  },
  created() {
    this.getList()
  },
}
</script>
